<template>
  <div id="order">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户ID">
        <el-input v-model="form.ber_id" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="$store.getters.getInfo.ber_uname" disabled></el-input>
      </el-form-item>
      <el-form-item label="服务类型">
        <template v-for="item in serviceKind">
          <el-input v-if="item.key === form.or_kind" v-model="item.name" disabled></el-input>
        </template>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="form.or_product" disabled></el-input>
      </el-form-item>
      <el-form-item label="金额">
        <el-input v-model="form.or_money" disabled></el-input>
      </el-form-item>
      <el-form-item label="服务商">
        <el-input v-model="form.ser_id"
                  @focus="visible = true"
                  clearable
                  @clear="clear"></el-input>
      </el-form-item>
      <el-dialog title="服务商信息" :visible.sync="visible">
        <el-table
                   @current-change="handleCurrentChange"
                   v-if="form.or_kind != 5 && form.or_kind != 2"
                    :data="serverData">
          <el-table-column property="ser_id" label="服务商ID" width="150"></el-table-column>
          <el-table-column property="ser_name" label="账号" width="200"></el-table-column>
          <el-table-column property="ser_cname" label="企业名称"></el-table-column>
        </el-table>
        <el-table
                @current-change="handleCurrentChange"
                v-else
                :data="serverData">
          <el-table-column property="ser_id" label="服务商ID" width="150"></el-table-column>
          <el-table-column v-if="form.or_kind === 5" property="kn_price" label="价格" width="200"></el-table-column>
          <el-table-column v-if="form.or_kind === 2" property="cer_price" label="价格" width="200"></el-table-column>
        </el-table>
      </el-dialog>
      <template v-if="form.or_kind !== 3">
        <el-form-item label="资料">
          <upload :type="2" @getImgUrl="getImgUrl" :is-edit="false"></upload>
        </el-form-item>
      </template>

      <el-button @click="$router.back()">返回</el-button>
      <el-button type="primary" @click="pay = true">下单</el-button>
    </el-form>

    <el-dialog title="支付"
               :visible.sync="pay"
               append-to-body
               width="30%"
    >
      <h3 style="display: inline">支付金额：</h3>
      <h2 style="color: red;display: inline">${{form.or_money}}</h2>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrder(false)">取消</el-button>
        <el-button type="primary" @click="addOrder(true)">支付</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import Upload from "../components/content/Upload";
  import {dictionary} from "../utils/allDictionary";

  export default {
    name: "Pay",
    components:{
      Upload
    },
   data(){
     return{
       form : {},
       visible : false,
       pay : false,
       serverData : [],
       currentRow : '',
       or_id : '',
       help : '',
       serviceKind : dictionary.serviceKind
     }
   },
    mounted() {
      this.form = this.$route.params.form
      if(this.$route.params.help)this.help = this.$route.params.help
      //获取服务商信息
      let url
      let postData = {}
      if(this.form.or_kind === 5) {
        url = 'https://haotry.top/api/admin/getKnowledgeByKey'
        postData.kn_name = this.form.or_product
        postData.kn_id = -1
        postData.ser_id= -1
        postData.kn_price = -1
        postData.kn_kind = -1
        postData.kn_type = -1
      }
      else if(this.form.or_kind === 2){
        url = 'https://haotry.top/api/admin/getCertificateByKey'
        postData.cer_name = this.form.or_product
        postData.cer_id = -1
        postData.ser_id= -1
        postData.cer_price = -1
        postData.cer_kind = -1
        postData.cer_type = -1
      }
      else{
        url = 'https://haotry.top/api/admin/getAllServiceSide'
      }

      axios.post(url,JSON.stringify(postData),{
        headers:{
          'Content-Type':'application/json'
        }
      }).then(res => {
        console.log(res)
        if(res.status === 200){
          this.serverData = res.data
        }
        else{
          alert('获取错误')
        }
      })
    },
    methods:{
      handleCurrentChange(row){
        // console.log(currentRow)
        this.currentRow = row
        this.form.ser_id = this.currentRow.ser_id
        if(this.currentRow.cer_price)this.form.or_money = this.currentRow.cer_price
        if(this.currentRow.kn_price)this.form.or_money = this.currentRow.kn_price
        this.visible = false
      },
      clear(){
        this.currentRow = ''
      },
      addOrder(isPay){
        //支付下单
        this.pay = false
        isPay? this.form.or_pay = 1 : ''
        axios.post('https://haotry.top/api/buyer/addOrder',JSON.stringify(this.form),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          console.log(res)
          let data = res.data
          if(data.status === 200) {
            this.or_id = data.data.or_id
            this.$message({
              message: '下单成功',
              type: 'success'
            });

            if (this.form.or_kind == 3) {
              this.help.ser_id = this.form.ser_id
              this.help.rec_price = this.form.or_money
              this.help.or_id = this.or_id
              axios.post('https://haotry.top/api/recourse/insertRecourse', JSON.stringify(this.help), {
                headers: {
                  'Content-Type': 'application/json'
                }
              }).then(res => {
                console.log(res)
              })
            }
            isPay ? this.$router.push('buyer/myOrder/payed') : this.$router.push('/buyer/myOrder/notPay')
          }
          else{
            this.$message.error('下单失败');
          }
        })

      },
      getImgUrl(url){
        this.form.or_url = url
      }
    }
  }
</script>

<style scoped>
#order{
  width: 500px;
  height: 500px;
  padding: 20px;
  margin: 0 auto;
  /*display: flex;*/
  /*justify-content: center;*/
}
</style>